<template>
    <common-dialog :title="title" :base-dialog="roleDialog">
        <div slot="body">

            <el-form :model="editData" :rules="rules" ref="editData" size="mini" label-width="100px" slot="body">

                <el-form-item label="登录帐号" prop="username">
                    <el-input v-model="editData.username" :disabled="editData.create_user?true:false" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="代理人编号" prop="code">
                    <el-input v-model="editData.code" :disabled="editData.create_user?true:false" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="代理人名称" prop="name">
                    <el-input v-model="editData.name" auto-complete="off" :disabled="editData.create_user?true:false"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phonenum">
                    <el-input v-model="editData.phonenum" :maxlength="11" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="idtype">
                    <el-select placeholder="" v-model="editData.idtype">
                        <el-option label="身份证" value="0"></el-option>
                        <el-option label="营业执照" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码" prop="idnum">
                    <el-input v-model="editData.idnum" :maxlength="18" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="证件照片" prop="idpic">
                    <div class="avatar-uploader" @click="clickFile">
                        <div tabindex="0" class="el-upload el-upload--text">
                            <img :src="path+editData.idpic" class="avatar">
                        </div>
                    </div>
                    <input type="file" name="file" class="el-upload__input" @change="changeFileUpload">
                </el-form-item>

                <el-form-item label="银行名称" prop="bankname">
                    <el-input v-model="editData.bankname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="banknum">
                    <el-input v-model="editData.banknum" :maxlength="19" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="" style="width:400px;">
                    <el-button type="primary" @click="addAndEditMenu('editData')">确定</el-button>
                    <el-button type="primary" @click="cancelDialog('editData')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </common-dialog>
</template>

<<script>
import service from "@/service";
import commonDialog from "@/components/Common/CommonDialog";
import { mapGetters } from "vuex";
export default {
    props:{
        roleDialog:{
            type:Boolean,
            default:false
        },
        title:{
            type:String,
            default:''
        },
        editData:{
            type:Object,
            default:{}
        }
    },
  data(){
      
      return{
          path: configPath.imageUrl,
     
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [{ required: true, message: "请输入登录帐号", trigger: "blur" }],
        phonenum: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "请输入合法的手机号码",
            trigger: "blur"
          }
        ],
        idpic: [{ required: true, message: "请上传证件照片", trigger: "blur" }],
         code: [{ required: true, message: "请输入代理人编号", trigger: "blur" }],
          name: [{ required: true, message: "请输入代理人名称", trigger: "blur" }],
          idtype: [{ required: true, message: "请选择证件类型", trigger: "blur" }],
          idnum:[{ required: true, message: "请输入证件号码", trigger: "blur" }],
          bankname:[{ required: true, message: "请输入银行名称", trigger: "blur" }],
          banknum:[{ required: true, message: "请输入银行卡号", trigger: "blur" }],
      }
      }
  },

   components: {
    commonDialog
  },
  methods:{
      clickFile() {
         document.querySelector('.el-upload__input').click()
        
        },
        //上传
         changeFileUpload(e) {
            let files = e.target.files;
            let formData = new FormData();
            formData.append('file', files[0]);
            service.uploadImageService(formData).then(res => {
                if (res.success ) {

                     this.editData.idpic = res.result;
                     
                     e.target.value = ""
                }
            })
        },
     cancelDialog(formName) {
        this.$emit('cancelAndClick',{bool:false,isSearch:true})
        this.$refs[formName].resetFields();
    },
    addAndEditMenu(formName){
        this.$refs[formName].validate(valide => {
            if (valide) {
            let params= Object.assign({},this.editData);
            this.$emit('addAndClick',params,formName)
            }
        });
    }
   

  }
}
</script>

